<template>
  <div>
    <TableSlot :tableData="userList" :tableCloumn="tableCloumn">
      <template #default="obj">
        <el-button type="primary" @click="toEdit(obj)">编辑</el-button>
        <el-button type="danger" @click="toDelete(obj)">删除</el-button>
      </template>
    </TableSlot>
  </div>
</template>

<script>
  import TableSlot from '@/components/common/TableSlot.vue'
  import { getAllUser, deleteById } from '@/api/userApi.js'
  export default {
    components: {
      TableSlot
    },
    data() {
      return {
        userList: [],
        tableCloumn: [{
          propKey: "userId",
          labelKey: "编号",
          widthKey: 100
        }, {
          propKey: "username",
          labelKey: "用户名",
          widthKey: 180
        }, {
          propKey: "nickname",
          labelKey: "昵称",
          widthKey: 180
        }, {
          propKey: "age",
          labelKey: "年龄",
          widthKey: 80
        }, {
          propKey: "sex",
          labelKey: "性别",
          widthKey: 80
        }, {
          propKey: "imgUrl",
          labelKey: "头像",
          widthKey: 180
        }]
      }
    },
    methods:{
      async toDelete(obj){
        let res = await deleteById(obj.obj.userId);
        this.userList = this.userList.filter(ele => ele.userId!=obj.obj.userId)
      },
      toEdit(obj){
        console.log(obj)
      }
    },
    async created() {
      let res = await getAllUser()
      this.userList = res.data
    }
  }
</script>

<style>
</style>
